const path = require('path')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
// const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const webpack = require('webpack')
var FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');



const envMode = process.env.envMode
require('dotenv').config({ path: `.env` })
require('dotenv').config({ path: `.env.${envMode}` })

const prefixRE = /^VUE_APP_/
let env = {}
for (const key in process.env) {
  if (key == 'NODE_ENV' || key == 'BASE_URL' || prefixRE.test(key)) {
    env[key] = JSON.stringify(process.env[key])
  }
}

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: path.resolve(__dirname, '../src/main.js'),
  output: {
    assetModuleFilename: 'assets/images/[contenthash][ext]',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['@babel/plugin-transform-runtime']],
            cacheDirectory: true,
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: 'assets/images/[hash][ext][query]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024,
          },
        },
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[hash:8].[name][ext]',
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        ...env,
      },
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false,
    }),
    // new HtmlWebpackPlugin({
    //   template: './public/index.html',
    //   filename: 'index.html',
    //   title: 'Webpack5 built with PNPM',
    //   inject: 'body',
    // }),

    new MiniCssExtractPlugin({
      filename: 'assets/styles/[contenthash].css',
    }),
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: [`Build Successfully~~~`]
      },
      clearConsole: true
    })
  ],
  resolve: {
    extensions: ['.js', '.mjs', '.css', '.less', '.vue'],
    alias: {
      '@': resolve('src'),
      '@assets': resolve('src/assets'),
      '@styles': resolve('src/assets/styles'),
      '@images': resolve('src/assets/images'),
      '@components': resolve('src/components'),
    },
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  }
}
